<template>
	<div class="wraper" :class="{padTop:isIphoneX,iphone:isIphone}">
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
		</div>
		<div class="content">
			<h1>{{$t('goRealName-key1')}}</h1>
			<div class="desc">
				<span>{{$t('goRealName-key2')}}</span>
				<span>{{$t('goRealName-key3')}}</span>
			</div>
			<div class="item">
				<span class="label">{{$t('goRealName-key4')}}</span>
				<input @blur="blur" @click="updateDialog" type="text" v-model="name" :placeholder="$t('goRealName-key5')">
			</div>
			<div class="error">{{error1}}</div>
			<div class="item">
				<span class="label">{{$t('goRealName-key6')}}</span>
				<input @blur="blur" @click="updateDialog" type="text" v-model="IDcard" :placeholder="$t('goRealName-key7')">
			</div>
			<div class="error">{{error2}}</div>
		</div>
		<div class="btn">
			<van-button @click="upload" :loading="loading" clas="btn" type="primary" color="#1C4D7F">{{$t('goRealName-key8')}}</van-button>
		</div>
		<div class="other" @click="goOthers">
			<p>{{$t('goRealName-key9')}}</p>
			<p class="en">Certification of other areas or documents</p>
		</div>
	</div>
</template>
<script src="./goRealName.js"></script>
<style scoped>
	@import './goRealName.css';
</style>